<template>
  <el-row style="padding-top: 10px">
    <!-- 无数据调试的 -->
    <el-col :span="24">
      <el-tabs v-model="activeName">
        <el-tab-pane label="异常信息" name="first">

          <Portlet title="订单信息">
            <el-form label-position="left" label-width="110px">
              <el-row>
                <el-col :lg="8" :md="12" :xl="6">
                  <el-form-item label="服务订单号:">
                    <span>{{ headerDetail.orderNo }}</span>
                  </el-form-item>
                </el-col>

                <el-col :lg="8" :md="12" :xl="6">
                  <el-form-item label="商家名称:">
                    <span>{{ headerDetail.cargoOwnerName }}</span>
                  </el-form-item>
                </el-col>

                <el-col :lg="8" :md="12" :xl="6">
                  <el-form-item label="用户姓名:">
                    <span>{{ headerDetail.consigneName }}</span>
                  </el-form-item>
                </el-col>

                <el-col :lg="8" :md="12" :xl="6">
                  <el-form-item label="服务方:">
                    <span>{{ headerDetail.serviceUserName }}</span>
                  </el-form-item>
                </el-col>

                <el-col :lg="8" :md="12" :xl="6">
                  <el-form-item label="服务类型:">
                    <span>{{ headerDetail.service }}</span>
                  </el-form-item>
                </el-col>

                <el-col :lg="8" :md="12" :xl="6">
                  <el-form-item label="用户电话:">
                    <span>{{ headerDetail.consignePhone }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </Portlet>

          <Abnormal-module ref="AbnormalModule" :detail="detail"></Abnormal-module>

          <AbnormalOperation ref="AbnormalOperation"
                             :id="id" @refresh="getDetail"
                             v-if="abnormalState != '2'"
                             :detail="detail"
          ></AbnormalOperation>
          <HandleShow ref="HandleShow" :detail="detail" v-if="abnormalState == '2'"></HandleShow>
          <FeeShow ref="FeeShow" :detail="detail" v-if="abnormalState == '2'"></FeeShow>

        </el-tab-pane>
        <el-tab-pane label="异常跟进" name="second">
          <Follow-up :objectId="id" :id="serOrderPackId" :objectType="'CF03'"></Follow-up>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script>
import AbnormalModule from '@/views/oms/abnormal/list/AbnormalModule'
import FollowUp from '@/views/oms/business/FollowUp.vue'
import AbnormalOperation from '@/views/oms/abnormal/list/AbnormalOperation'
import HandleShow from '@/views/oms/abnormal/list/HandleShow'
import FeeShow from '@/views/oms/abnormal/list/FeeShow'
import {dotData} from '@/utils'

export default {
  name: 'Show',
  components: {
    AbnormalModule,
    FollowUp,
    AbnormalOperation,
    FeeShow,
    HandleShow
  },
  data() {
    return {
      id: this.$route.params.id,
      serOrderPackId: this.$route.query.serOrderPackId,
      activeName: 'first',
      headerDetail: {},
      detail: {}
    }
  },
  created() {
    this.getDetail()
    this.getOrderData()
  },
  computed: {
    abnormalState() { // 为2是已处理
      return dotData(this.detail, 'chAbnormal.abnormalState')
    }
  },
  methods: {
    getDetail() {
      this.$ajax.get('/ms-warehouse-order/orderAbnormal/getAbnormalDetail', {id: this.id}).then(response => {
        if (!response.data) {
          return
        }
        this.detail = response.data || {}
      })
    },
    jump() {
      this.$router.push({path: '/ss-oms/orders/service-orders/show/' + this.headerDetail.orderId})
    },
    getOrderData() {
      this.$ajax.get('/ms-warehouse-order/orderAbnormal/getServiceOrderDetail', {serOrderPackId: this.serOrderPackId}).then(response => {
        if (!response.data) {
          return
        }
        this.headerDetail = response.data || {}
      })
    }
  }
}
</script>
